<template>
	<view class="box-bg">
		<view class="login-con">
			<view class="game-titel">
				逃出五角大楼
			</view>
			<view class="nickname">
				<uni-easyinput errorMessage v-model="nickname" :styles="styles" focus placeholder="请输入游戏昵称" maxlength="7"></uni-easyinput>
			</view>
			<view class="nickname">
				<uni-easyinput type="password" errorMessage v-model="password" :styles="styles" focus placeholder="请输入密码" maxlength="12"></uni-easyinput>
			</view>
			<view class="go-loding" @click="goLoad">
				进入游戏
			</view>
		</view>
	</view>
	
	<uni-popup ref="message" type="message">
		<uni-popup-message type="error" :message="messageText" :duration="2000"></uni-popup-message>
	</uni-popup>
</template>

<script>
	import { gameLogin } from '@/api/login';

	export default {
		data() {
			return {
				messageText:"",
				nickname:"",
				password:"",
				styles: {
					color: '#000000',
					borderColor: '#8b8c94'
				}
			}
		},
		onLoad() {
			uni.clearStorageSync("token");
		},
		methods: {
			goLoad(){
				if(this.nickname == ""){
					this.messageText = "请输入昵称";
					this.$refs.message.open();
					return;
				}
				if(this.password == ""){
					this.messageText = "请输入密码";
					this.$refs.message.open();
					return;
				}
				let data = {
					"nickname":this.nickname,
					"password":this.password
				}
				gameLogin(data).then((result)=>{
					console.log(result);
					// 错误提示
					if(result.code == 200){
						uni.setStorageSync("token",result.data);
						uni.setStorageSync("userInfo",JSON.stringify(result.data));
						uni.redirectTo({
							url:"/pages/load_page/load_page"
						})
					}else{
						this.messageText = result.msg;
						this.$refs.message.open();
					}
				})
			}
		}
	}
</script>

<style scoped>

.box-bg{
	width: 100%;
	height: 100vh;
	background: url("https://tcwjdl.oss-cn-chengdu.aliyuncs.com/home_bg.jpeg");
	background-size: 100% 100%;
	overflow: hidden;
}
.login-con{
	width: calc(80% - 20px);
	height: 260px;
	margin: 0 auto;
	margin-top: 150px;
	border-radius: 20px;
	background-color: rgba(255, 255, 255, 0.7);
	padding: 20px 10px;
}
.game-titel{
	width: 100%;
	height: 30px;
	text-align: center;
	font-size: 30px;
	font-weight: bold;
}
.nickname{
	margin-top: 30px;
}
.go-loding{
	width: 100%;
	height: 50px;
	line-height: 50px;
	text-align: center;
	background-color: black;
	color: #fff;
	margin-top: 30px;
	border-radius: 20px;
}

@media screen and (min-width: 500px){
	.login-con{
		margin-top: 70px;
		width: 300px;
	}
	.box-bg{
		background-size: 100% auto;
	}
}



.is-focused{
	border-color: #8b8c94 !important;
}
.content-clear-icon{
	color: #8b8c94 !important;
}
</style>
